<div id="content">
  <div class="row s_page_title" *ngIf="pageType === 'new'">
    <sa-big-breadcrumbs
      [items]="['运输任务', '厂区围栏', '新增围栏']"
      icon="fa fa-list"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <div class="row s_page_title" *ngIf="pageType === 'update'">
    <sa-big-breadcrumbs
      [items]="['运输任务', '厂区围栏', '编辑围栏']"
      icon="fa fa-list"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <div class="s_page_wrap">
    <div class="page-header">
      <h1 class="page_detail_title">{{ page_title }}围栏</h1>
    </div>
    <div class="row" style="margin-top: 5px">
      <div class="col-xs-12">
        <form
          name="companyForm"
          id="companyForm"
          class="form-horizontal"
          novalidate="novalidate"
          [saBootstrapValidator]="validatorOptions"
        >
          <div class="col-sm-12" style="padding: 0 2%">
            <div class="form-group col-sm-4">
              <label class="control-label col-sm-4 no-padding-right">
                围栏名称
                <sup>*</sup>
              </label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="fenceName"
                    type="text"
                    [attr.companyId]="rowId"
                    [(ngModel)]="page.fenceName"
                    placeholder="围栏名称"
                  />
                </div>
              </div>
            </div>

            <div class="form-group col-sm-4">
              <label class="control-label col-sm-4 no-padding-right">
                所属项目
                <sup>*</sup>
              </label>
              <div class="col-sm-8">
                <sa-company-tree
                  companyTreeId="companyTree"
                  [Height]="32"
                  [inputName]="'companyName'"
                  [companyNameValue]="page.companyName"
                  [companyIdValue]="page.companyId"
                  (companySelected)="companySelected($event)"
                ></sa-company-tree>
              </div>
            </div>

            <div class="form-group col-sm-4">
              <label class="control-label col-sm-4 no-padding-right">
                行业类型
                <sup>*</sup>
              </label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <select
                    class="form-control"
                    [(ngModel)]="page.businessType"
                    (change)="businessTypeChange($event.target.value)"
                    name="businessType"
                    placeholder="请选择"
                    autocomplete="businessType-level1"
                  >
                    <option value="">请选择</option>
                    <option *ngFor="let item of businessTypeList" [value]="item.value">{{ item.label }}</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">
              经度
              <sup>*</sup>
            </label>
            <div class="col-sm-9">
              <div class="clearfix">
                <input class="form-control" [(ngModel)]="page.lng" name="lng" type="text" placeholder="经度" />
              </div>
            </div>
          </div>

          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">
              纬度
              <sup>*</sup>
            </label>
            <div class="col-sm-6">
              <div class="clearfix">
                <input class="form-control" [(ngModel)]="page.lat" name="lat" type="text" placeholder="纬度" />
              </div>
            </div>
            <button id="positionBtn" type="button" class="btn btn-primary" style="padding: 4px" (click)="showMap()">
              地图
            </button>
          </div>

          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">
              半径
              <sup>*</sup>
            </label>
            <div class="col-sm-9">
              <div class="clearfix">
                <input
                  class="form-control"
                  [(ngModel)]="page.radius"
                  name="radius"
                  placeholder="填写围栏半径"
                  autocomplete="off"
                  (keyup)="numberFilter()"
                />
              </div>
              <div class="" (click)="isEnableFenceClick()" style="padding-top: 2px">
                <span class="el-checkbox__inner" [ngClass]="{ 'is-checked': isEnableFence }"></span>
                <span style="margin-left: 5px">是否启用</span>
              </div>
            </div>
          </div>

          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">备注</label>
            <div class="col-sm-9">
              <div class="clearfix">
                <input
                  class="form-control"
                  [(ngModel)]="page.remark"
                  name="remark"
                  rows="3"
                  cols="30"
                  placeholder="填写备注..."
                  autocomplete="off"
                />
              </div>
            </div>
          </div>
          <br />
          <div class="map-box clearfix">
            <div id="baiduMap"></div>
            <sa-bmap-tools [baiduMap]="baiduMap" [isShowZoom]="true"></sa-bmap-tools>
            <div class="auto-search-bmap">
              <div id="r-result"><input type="text" id="suggestId" placeholder="请输入地址" /></div>
              <i class="fa fa-search suggestIcon" (click)="suggestSearchBtn()"></i>
              <div
                id="searchResultPanel"
                style="border: 1px solid #c0c0c0; width: 150px; height: auto; display: none"
              ></div>
            </div>
          </div>
          <div class="center">
            <button (click)="onSubmit()" id="addBtn" class="btn btn-primary" *ngIf="page_title === '新增'">添加</button>
            <button (click)="onSubmit()" id="editBtn" class="btn btn-primary" *ngIf="page_title === '编辑'">
              保存
            </button>
            <button type="button" id="cancleBtn" (click)="goBack()" class="btn default">返回</button>
          </div>
        </form>
        <div class="hr hr-dotted"></div>
      </div>
    </div>
  </div>
</div>
